<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/9/21 0021
  Time: 19:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>--%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>收藏中心-闲时网</title>

    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/collection/collection.css" type="text/css">
    <%--<link rel="stylesheet" href="../css/common/nav.css" type="text/css">--%>

</head>

<body>
<%@ include file="../common/nav.jsp"%>

<%--<div class="header">--%>
    <%--&lt;%&ndash;<%@ include file="../common/nav.jsp"%>&ndash;%&gt;--%>


<%--</div>--%>
<div class="container-fluid">
    <div class="row">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
                <div class="collapse navbar-collapse" id="example-navbar-collapse">
                    <ul class="nav navbar-nav" id="secondheader">
                        <li><a href="${path}/center/list" style="margin-left: 135px">我的主页</a></li>
                        <li><a href="${path}/collection/list" style="margin-left: 30px">我的收藏</a></li>
                        <li><a href="${path}/edit/list" style="margin-left: 30px">设置</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
</div>
<%--<div style="margin-top:-19px;">--%>
    <%--<nav class="navbar navbar-inverse" role="navigation">--%>
        <%--<div class="container-fluid">--%>
            <%--<div>--%>
                <%--<ul class="nav navbar-nav" style="margin-left:10%;" class="dao">--%>
                    <%--<li><User href="../user/center.jsp">我的主页</User></li>--%>
                    <%--<li class="active"><User href="#">收藏管理</User></li>--%>
                    <%--<li><User href="#">设置</User></li>--%>
                <%--</ul>--%>
            <%--</div>--%>
        <%--</div>--%>
    <%--</nav>--%>

<%--</div>--%>

<div>
    <div class="left" style="width: 15%;margin-left: 10%;float: left;">
        <div class="container">
            <div>
                <!-- data-spy="affix"data-spy="affix" -->
                <!-- class="col-xs-3" -->
                <ul class="nav nav-tabs" >
                    <li><a href="#">我收藏的服务</a></li>
                </ul>
            </div>
        </div>







    </div>

    <div class="right" style="margin-top:10px;width: 65%; float:right;margin-right:8%;border:1px solid grey;">

        <%--循环的开始--%>
<c:forEach items="${requestScope.pageInfo.list}" var="t">
    <c:if test="${t.status==0}">
            <%--<c:forEach items="${list}" var="c">--%>

                <%--<c:if test="${c.status==0}">--%>
        <div>
            <div style="margin-left:2%;margin-top:10%;">

                <%--//删除收藏--%>

                    <input type="checkbox" value="${t.id}" name="cks">

                <a href="${path}/delone?id=${t.id}">
                    <%--<input type="checkbox" value='${t.id}' name="cks">&nbsp;&nbsp;<span class="glyphicon glyphicon-trash"></span>--%>
                    &nbsp;&nbsp;<span class="glyphicon glyphicon-trash"></span>

                </a>
            </div>
            <div style="margin-left:8%;margin-top:-10%;border: 1px solid grey;width:90%;">
                <div class="media-left media-top">
                    <img src="${t.url}" class="media-object"style="width: 120px;
                        height: 120px;
                        border-radius: 50%;
                        padding: 15px;" >
                </div>
                <div class="media-body">
                        <span>
                            <p style="padding-top:25px;font-size:20px;">
                                <c:forEach items="${requestScope.userInfos}" var="s">
                                    <c:if test="${t.servicesId==s.id}">
                                        ${s.name}


                                         </c:if>
                                </c:forEach>
                            </p>
                            <%--<p style="margin-left:70px;margin-top:-30px;">--%>
                                <%--<a href="#" style="color:rgb(0, 140, 255);">添加备注</a>--%>
                            <%--</p>--%>
                        </span>
                        <%--${t.pName}${t.tName}--%>
                    <p>${t.province}${t.city}</p>
                    <%--<p>给力度：6.53/10 | 靠谱度：60.86%</p>--%>
                    <div style="margin-top:-75px;margin-left:35%;">
                            <%--<span>--%>
                                <%--<div class="form-control" style="width:150px;margin-left:50px;">--%>
                                    <%--<p style="color:rgb(0, 140, 255);padding-left:8px;">--%>
                                        <%--<button style="border:0px;background:white;"><a href="#"style="color: #008FF4;">查看需求方主页</a></button></p>--%>
                                    <%--</p>--%>
                                    <%--</p>--%>
                                <%--</div>&nbsp;&nbsp;--%>
                                <%--<div class="form-control"--%>
                                     <%--style="background-color:rgb(0, 140, 255);width:150px;margin-left:55%;margin-top:-13%;">--%>
                                    <%--<p style="color:white;padding-left:8px;padding-top:-3px;">--%>
                                        <%--<button style="border:0px;background:rgb(0, 140, 255);"><a href="#" style="color:white;">查看服务方主页</a></button></p>--%>
                                    <%--</p>--%>
                                <%--</div>--%>
                            <%--</span>--%>
                    </div>

                </div>
            </div>
        </div>
    </c:if>
</c:forEach>




        <div>
            <div style="margin:40px 0 0 40px;">
                    <span>
<%--<button type='button' class='btn btn-danger' onclick='delAny()'>删除</button>--%>
                        <a href="#">
                            <%--<button type="checkbox" name="checkbox" style="border:0px; background:white;" id="=dou" onclick="quan()">--%>
                                <%--全选--%>
                            <%--</button>&nbsp;&nbsp;--%>

                            <input type="checkbox" name="checkbox" id="dou"  onclick=quan() >&nbsp;&nbsp;全选
                        </a>

                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type='button' class='btn btn-danger' onclick="delAny()">合并删除</button>
    </p>
                        <!-- <button >合并删除</button> -->


                    </span>


            </div>
            <%--导入分页标签--%>


            <div class="container ula"  style="margin-top:-46px;" id="content1">
                <div class="container" style="text-align: center">
                    <ul class="pagination">
                        <li><a href="javascript:goPage(1)">首页</a></li>

                        <%--上一页--%>
                        <c:if test="${pageInfo.pageNum>1}">
                            <li><a href="javascript:goPage(${pageInfo.pageNum-1})">&laquo;</a></li>
                        </c:if>
                        <c:if test="${pageInfo.pageNum<=1}">
                            <li class="disabled"><a>&laquo;</a></li>
                        </c:if>

                        <!--循环标签显示 - 显示5个
                            思路 - 起始值 - 从当前页
                        -->
                        <%--处理一下最终的页数--%>

                        <c:if test="${pageInfo.pageNum+4<pageInfo.pages}">
                            <c:set var="startPage" value="${pageInfo.pageNum}"></c:set>
                        </c:if>

                        <c:if test="${pageInfo.pageNum+4>=pageInfo.pages}">
                            <c:set var="startPage" value="${pageInfo.pages-4}"></c:set>
                        </c:if>

                        <c:forEach begin="${startPage<=0?1:startPage}" end="${startPage+4}" var="n">
                            <%--判断当前页是否高亮显示--%>
                            <li <c:if test="${pageInfo.pageNum == n}">class='active'</c:if>> <a href="javascript:goPage(${n})">${n}</a></li>
                        </c:forEach>


                        <%--下一页--%>
                        <c:if test="${pageInfo.pageNum<pageInfo.pages}">
                            <li><a href="javascript:goPage(${pageInfo.pageNum+1})">&raquo;</a></li>
                        </c:if>
                        <c:if test="${pageInfo.pageNum>=pageInfo.pages}">
                            <li class="disabled"><a>&raquo;</a></li>
                        </c:if>

                        <li><a href="javascript:goPage(${pageInfo.pages})">尾页</a></li>
                        <li><a href="#">当前页${pageInfo.pageNum}/${pageInfo.pages}总页</a></li>


                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>



<div id="content">

</div>
<%--<%@ include file="../common/footer.jsp"%>--%>
<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="../plugins/bootstrap/js/bootstrap.js"></script>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        dropdownOpen();//调用
    });
    /**
     * 鼠标划过就展开子菜单，免得需要点击才能展开
     */
    function dropdownOpen() {

        var $dropdownLi = $('li.dropdown');

        $dropdownLi.mouseover(function () {
            $(this).addClass('open');
        }).mouseout(function () {
            $(this).removeClass('open');
        });
    }
</script>

<script>
    function goPage(pageNum){
        window.location="${path}/collection/list?pageNum="+pageNum;
    }
</script>

<script>
    function delAny(){

        //1. 获取所有的checkbox
        var cks = document.getElementsByName("cks");

        //2. 定义计数器
        var count = 0;

        for(var i = 0;i<cks.length;i++){
            if(cks[i].checked){
                count++;
            }
        }
        if(count==0){
            alert("sorry,请您先选择!");
            return;
        }

        var pids = "";

        for(var i=0;i<cks.length;i++){
            if(cks[i].checked){
                pids+="id="+cks[i].value+"&";
            }
        }

        alert("是否全部删除");

        var url = "${path}/delany?"+pids;

        window.location=url.substring(0,url.length-1);
    }
</script>
<script type="text/javascript">
    function quan(){

            var checkall=document.getElementById("dou");

            var checknames=document.getElementsByName("cks");

            for(var i=0;i<checknames.length;i++){

                checknames[i].checked=checkall.checked;
            }

        }

</script>

</body>

</html>